@import "@@/styles/variables.scss";

// 重写 app-container 样式以使用 flex 布局
.app-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 20px;
  background-color: var(--el-bg-color);
  border-radius: 8px;
}

.page-content {
  display: flex;
  flex-direction: column;

  // 确保头部组件不被压缩
  :deep(.page-header) {
    flex-shrink: 0;
  }

  :deep(.stats-cards) {
    flex-shrink: 0;
    margin-bottom: 24px;
  }
}

// 图表区域布局
.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 20px;
  flex: 1;

  .chart-wrapper {
    display: flex;
    flex-direction: column;
    /* 关键修复：允许 Grid 子项在两列布局下收缩，避免一侧被撑大 */
    min-width: 0;
    min-height: 0;

    // 渠道绩效表格 - 占据第一行两列
    &:first-child {
      grid-column: 1 / -1;
      min-height: 300px;
    }

    // 内容发布趋势图 - 第二行第一列
    &:nth-child(2) {
      grid-column: 1;
      min-height: 400px;
    }

    // 版本用户活跃度对比 - 第二行第二列
    &:nth-child(3) {
      grid-column: 2;
      min-height: 400px;
    }

    // 代理商绩效排行 - 第三行第一列
    &:nth-child(4) {
      grid-column: 1;
      min-height: 400px;
    }

    // 用户版本分布 - 第三行第二列
    &:nth-child(5) {
      grid-column: 2;
      min-height: 400px;
    }
  }
}

// 响应式适配
@media (max-width: 1400px) {
  .charts-section {
    grid-template-columns: 1fr;

    .chart-wrapper {
      &:first-child {
        grid-column: 1;
      }

      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(4),
      &:nth-child(5) {
        grid-column: 1;
      }
    }
  }
}

@media (max-width: 768px) {
  .app-container {
    margin: 10px !important;
    padding: 15px !important;
  }

  .charts-section {
    gap: 15px;

    .chart-wrapper {
      min-height: 300px !important;
    }
  }
}

// 自定义下拉选择器样式
:deep(.el-select) {
  .el-select__wrapper {
    border-radius: 6px;
    border: 0.5px solid var(--el-border-color-lighter);
    height: 36px;
    background-color: var(--el-bg-color);
    transition: all 0.2s ease;

    &:hover {
      border-color: var(--el-border-color);
    }

    &.is-focused {
      border-color: var(--el-color-primary);
      box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
    }
  }

  .el-select__placeholder {
    font-size: 14px;
    color: var(--el-text-color-placeholder);
  }

  .el-select__selected-item {
    font-size: 14px;
    color: var(--el-text-color-regular);
  }

  .el-select__caret {
    color: var(--el-text-color-regular);
  }
}

// 下拉选项样式
:deep(.el-select-dropdown) {
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow);

  .el-select-dropdown__item {
    font-size: 14px;
    color: var(--el-text-color-regular);
    padding: 8px 12px;

    &:hover {
      background-color: var(--el-fill-color-light);
    }

    &.is-selected {
      background-color: var(--el-color-primary-light-9);
      color: var(--el-color-primary-dark-2);
      font-weight: 500;
    }
  }
}

// 加载状态样式
:deep(.el-loading-mask) {
  background-color: var(--el-overlay-color);
  backdrop-filter: blur(2px);

  .el-loading-spinner {
    .circular {
      stroke: var(--el-color-primary);
    }

    .el-loading-text {
      color: var(--el-text-color-secondary);
      font-size: 14px;
    }
  }
}

// 卡片通用样式增强
:deep(.stats-cards) {
  margin-bottom: 24px;

  .stats-card {
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
  }
}

// 确保图表容器样式一致
.chart-wrapper {
  > * {
    height: 100%;
  }
}
